<template>
    <el-dialog title="教练开通" v-model="visible" :width="980" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="120px"
            label-position="right" v-loading.fullscreen="loading">
            <el-form-item label="机构:">
                <div>{{ agent.name }}</div>
            </el-form-item>
            <el-form-item label="教练：" prop="selected">
                <div class="panel-search-box" style="padding: 0px;">
                    <div class="panel-search">
                        <div class="panel-sFlex">
                            <el-input v-model="search.name" placeholder="教练名称" clearable class="w165"></el-input>
                            <el-select v-model="search.teachExercise" placeholder="体验" clearable style="padding-left: 10px;">
                                <el-option label="未开通" :value="0"></el-option>
                                <el-option label="开通" :value="1"></el-option>
                            </el-select>
                            <el-select v-model="search.auditStatus" placeholder="考核状态" clearable style="padding-left: 10px;">
                                <el-option label="未通过" :value="0"></el-option>
                                <el-option label="通过" :value="1"></el-option>
                            </el-select>
                        </div>
                        <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    </div>
                </div>
                <scDialogTable ref="teacherTable" :params="search" :apiObj="$API.teacher.list" stripe style="border-top: 0px;" :height="500" @handleSelectionChange="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="name" label="姓名" align="left"></el-table-column>
                    <el-table-column label="等级" prop="level" width="150" align="center">
                        <template #default="scope">
                            {{ scope.row.level ? scope.row.level.name : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="体验" prop="teachExercise" width="130" align="center">
                        <template #default="scope">
                             {{ scope.row.teachExercise ? scope.row.teachExercise.name : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="头衔" prop="title" width="150" align="center">
                        <template #default="scope">
                            {{ scope.row.title ? scope.row.title.name : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="所属机构" prop="agent" width="150" align="center">
                        <template #default="scope">
                            {{ scope.row.agent ? scope.row.agent.name : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" prop="mobile" width="120" align="center">
                    </el-table-column>
                    <el-table-column label="考核状态" prop="auditStatus" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.auditStatus ? scope.row.auditStatus.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status" width="120" align="center">
                        <template #default="scope">
                            <el-tag size="mini" v-if="scope.row.status.value == 1" type="success">{{scope.row.status.name}}</el-tag>
                            <el-tag size="mini" v-if="scope.row.status.value == 0" type="danger">{{scope.row.status.name}}</el-tag>
                        </template>
                    </el-table-column>
                </scDialogTable>
            </el-form-item> 
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">开 通</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    emits: ['success', 'closed'],
    data() {
        return {
            visible: false,
            loading: false,
            isSaveing: false,
            agent: {},
            teacherIds: [],
            form: {
                selected: []
            },
            rules: {
                selected: [
                    { required: false, message: '请选择教练', trigger: 'blur' },
                ],
            },
            selected: [],
            search: {
                status: 1,
                agentId: null,
                isOpen: null,
            }
        }
    },
    mounted() {
        
    },
    methods: {
        //显示
        open(agent) {
            this.visible = true
            this.agent = agent
            if (this.agent) {
                this.search.agentId = agent.id
                this.search.isOpen = 0
                this.upsearch()
            }
            return this
        },
        // 搜索
		upsearch() {
            if (this.$refs.teacherTable) {
                this.$refs.teacherTable.upData(this.search)
            }
		},
        //表单提交方法
        async submit() {
            if (this.form.selected.length < 1) {
                this.$notify.error('请选择教练')
                return false
            }

            let _form = {
                agentId: this.agent.id, 
                teacherIds: []
            }

            this.form.selected.forEach(item => {
                _form.teacherIds.push(item)
            })

            try {
                this.isSaveing = true;
                await this.$API.agent.teacher.addBatch.post( _form)
                this.visible = false
                this.$emit('success')
                this.$notify.success("操作成功")
            } finally {
                this.isSaveing = false;
            }
        },
        handleSelectionChange(row) {
            this.form.selected = []
            row.forEach(ele=>{
                this.form.selected.push(ele.id)
            })
        },
    }
}
</script>

<style scoped>
.panel-sFlex {
	display: flex;
	overflow: hidden;
    margin-left: 0px;
}
.w165 {
	width:165px;
}
</style>
